<template>
	<view class="address-content">
		<ul>
			<li>
				<span>联系人</span>
				<input type="text" maxlength="10" placeholder="name" v-model="form_person" value="form_person" />
				<radio-group class='radio-group' v-model="form_radio1" @change="radioChange1">
					<label>
						<radio color="#1E90FF" value="先生" checked/><text>先生</text>
					</label>
					<label>
						<radio color="#1E90FF" value="女士" /><text>女士</text>
					</label>
				</radio-group>
			</li>
			<li>
				<span>电话</span>
				<input type="text" maxlength="15" placeholder="176****6688" v-model='form_phone' value="form_phone" />
				<span class='tel' @click='getPhone'>+通讯录</span>
			</li>
			<li @click='getAddress'>
				<span>地址</span>
				<span class='address'>{{ address }}</span>
				<image class='img' src="@/static/icon/position.png"></image>
			</li>
			<li>
				<span>详细</span>
				<input type="text" maxlength="50" placeholder="例: 门牌号(1-601)" v-model="form_msg" value="form_msg" />
			</li>
			<li>
				<span>类型</span>
				<radio-group v-model="form_radio2" @change="radioChange2" style='width: 75%;display: flex;justify-content: space-between'>
					<label>
						<radio color="#1E90FF" value="家" checked/><text>家</text>
					</label>
					<label>
						<radio color="#1E90FF" value="公司" /><text>公司</text>
					</label>
					<label>
						<radio color="#1E90FF" value="学校" /><text>学校</text>
					</label>
					<label>
						<radio color="#1E90FF" value="学校" /><text>其他</text>
					</label>
				</radio-group>
			</li>
			<li>
				<span>微信</span><span @click='goWxAddress'>去选择微信收货地址</span>
			</li>
		</ul>
		<button @click='ctrlData'>保存信息</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				form_person: '',
				form_radio1: '先生',
				form_phone: '',
				address: '',
				form_msg: '',
				form_radio2: '家'
			}
		},
		onLoad() {
			const address = this.$store.state.a.address
			if(address == ''){
				this.address = '请选择您的收货地址'
			}else{
				this.address = address
			}
		},
		methods:{
			// 唤醒通讯录
			getPhone(){
				// uni.makePhoneCall({
				//     phoneNumber: this.form_phone
				// });
				uni.addPhoneContact({
				    nickName: '昵称',
				    mobilePhoneNumber: '114',
				    weChatNumber: 'wx123',
				    success(res) {
				        console.log(res);
				    },
				    fail(err) {
				        console.log(err);
				    }
				});
			},
			// 获取地址
			getAddress(){
				let that = this
				uni.chooseLocation({
					success(res) {
            that.address = res.name;
					}
				})
			},
			goWxAddress(){
				uni.navigateTo({
					url: '/pages/tab4/view/setup/setup'
				})
			},
			// 改变标签状态
			radioChange1(e){
				this.form_radio1 = e.detail.value
			},
			radioChange2(e){
				this.form_radio2 = e.detail.value
			},
			// 保存信息
			ctrlData(){
				this.$store.state.a.address = this.address
				let obj = {
					name: this.form_person,
					radio1: this.from_radio1,
					phone: this.form_phone,
					address: this.address,
					msg: this.form_msg,
					radio2: this.from_radio2
				}
				this.$store.state.a.userInfo = []
				this.$store.state.a.userInfo.push(obj);
				console.log(this.form_person,this.form_radio1,this.form_phone,this.address,this.form_msg,this.form_radio2)
				uni.showToast({
				    title: '保存成功'
				});
			}
		}
	}
</script>

<style lang='scss'>
.radio-group{
	width: 300rpx;
	position: absolute;
	right: 20rpx;
	z-index: 2;
	display: flex;
	justify-content: space-between;
}
.address-content{
	width: 95%;
	margin-left: 2.5%;
	ul{
		width: 100%;
		padding: 0;
		li{
			width: 100%;
			height: 130rpx;
			line-height: 130rpx;
			border-bottom: 1rpx solid rgba(176,196,222,0.2);
			display: flex;
			align-items: center;
			color: #999999;
			position: relative;
			span:first-child{
				width: 15%;
				margin-right: 50rpx;
				display:inline-block;
				text-align-last:justify;
				text-align:justify;
				color: black;
			}
			.tel{
				width: 130rpx;
				color: #1E90FF;
				margin-right: 20rpx;
			}
			.address{
				width: 66%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.img{
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				right: 20rpx;
			}
			input{
				width: 60%;
			}
		}
	}
	button{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-image: linear-gradient(to right,#00BFFF,#1E90FF);
		color: white;
		letter-spacing: 5rpx;
		font-size: 30rpx;
		margin-top: 30rpx;
	}
}
</style>
